﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="../../js/jquery-3.3.1.min.js" ></script>
    <script>
    	$(function(){
    		var index=1;
    		$(".adver").mouseover(function(){
    			$(".adver .arrowLeft,.adver .arrowRight").show();
    		}).mouseout(function(){
    			$(".adver .arrowLeft,.adver .arrowRight").hide();
    		});
    		$(".adver .arrowLeft").click(function(){
    			index--;
    			if(index<1){
    				index=1;
    				alert("已经没有了");
    				return;
    			}
    			//$(".adver")
    			$(this).parent().css("background","url(images/adver0"+index+".jpg)");
    			$(".adver ul li").css("background-color","#333333");
    			$(".adver ul li:contains("+index+")").css("background-color","orange");
    			
    		});
    		
    		$(".adver .arrowRight").click(function(){
    			index++;
    			if(index>6){
    				index=6;
    				alert("已经没有了");
    				return;
    			}
    			//$(".adver")
    			$(this).parent().css("background","url(images/adver0"+index+".jpg)");
    			$(".adver ul li").css("background-color","#333333");
    			$(".adver ul li:contains("+index+")").css("background-color","orange");
    		});
    	});
    </script>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
</html>